import React, { Component } from 'react'
import "./signupinfo.scss"
import Header from '../../components/Header/header'
import Footer from '../../components/Footer/footer'
import {  getApiSignInfo } from "../../axios/api"
import { get, UrlSearch } from '../../axios/localstorage';

export default class signupinfo extends Component {

    state = {
        id:'',
        alert:false,
        data:{
            living:[],
            courses:[]
        },
        livesign:[],
        ctype:1,
        showLogin:false,
        alert2:false,
    }

    componentWillMount(){
        
        window.scroll(0,0);

        let id = UrlSearch('id');
        this.setState({
            id
        })

        this.getData(id);
    }

    gotoChangeCtype=(type)=>{
        this.setState({
            ctype:type
        })
    }

    getData=(id)=>{
        let param = {
            id:id,
            token:get('token')
        }

        getApiSignInfo(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    data,
                    livesign:[data.livesign],
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoSignUp=()=>{
        if(!get('token')){
            this.setState({
                alert2:true
            })
            // message.info("请先登录");
            // this.gotoPage('/home')
            return false;
        }

        this.gotoPage('/productSignup?id='+this.state.id)

        // getApisetSign({
        //     token:get('token'),
        //     id:this.state.id
        // }).then( req =>{
        //     if(req.data.code === 1){
        //         this.setState({
        //             alert:true
        //         })

        //         this.getData(this.state.id)
        //     }else{
        //         message.info(req.data.msg);
        //     }
        // })
        
    }

    gotoPage=(page)=>{
        this.props.history.push(page);
    }

    gotoDataInfo=(id)=>{
        this.props.history.push('/signupinfo?id='+id);
        this.setState({id})
        this.getData(id);
        // this.getCate(id);
    }

    hideLoginType=()=>{
        this.setState({
            showLogin:false
        })
    }

    render() {
        return (
            <div className="signupinfo">
                <Header loginType={this.state.showLogin} hideLoginType={this.hideLoginType} />

                <div className='page1' style={{backgroundImage:"url('assets/img/huodongbeijing.png')"}}>
                    <div className='pm'>
                        <div className="cleft">
                            <img className="img" alt="" src="assets/imgs/dingwei.png" />
                            <p className="p_point" onClick={()=>{
                                if(get('type')){
                                    // this.gotoPage('/index')
                                    this.gotoPage('/home')
                                  }else{
                                    this.gotoPage('/home')
                                  }
                            }}>首页</p>
                            <img className="icon" alt="" src="assets/img/xiaji.png" />
                            <p className="p_point" onClick={()=>{this.gotoPage('/signup')}}>活动报名</p>
                            <img className="icon" alt="" src="assets/img/xiaji.png" />
                            <p>报名详情</p>
                        </div>
                        <div className='name'>
                            <img alt="" src="assets/img/huodongbaoming.png" />
                            <h2>活动报名</h2>
                            <p>趣味活动，在线报名</p>
                        </div>

                        <div className='info' >
                            <div className='imgBox' style={{backgroundImage:"url('"+this.state.data.image+"')"}}></div>
                            <div className='cinfo'>
                                <h2>{this.state.data.title}</h2>
                                <div className='ctext'>{this.state.data.cont}</div>
                                <div className='ctime'>
                                    <img alt="" src="assets/imgs/shijain.png" />
                                    <p>{this.state.data.createtime}</p>
                                    <img alt="" src="assets/img/dizhi.png" />
                                    <p>{this.state.data.address}</p>
                                </div>
                            </div>
                            <button hidden={this.state.data.is_sign} onClick={()=>{this.gotoSignUp()}}>立即报名</button>
                            <button hidden={!this.state.data.is_sign} className="btn2">已报名</button>
                        </div>

                    </div>  
                </div>

                <div className="main">
                    <div className="cen">
                        <div className="box2">
                            

                            <div className="tmb">

                                <div className="chead">
                                    <div className='citem'>
                                    活动详情
                                        <div className="icen"><span></span></div>
                                    </div>
                                </div>
                                <div className="desc">
                                    <div className="dinfo" dangerouslySetInnerHTML={{
                                            __html: this.state.data.content
                                        }}></div>
                                </div>
                                <div className="chead">
                                    <div className='citem'>
                                    成绩公布
                                        <div className="icen"><span></span></div>
                                    </div>
                                </div>
                                <div className="desc">
                                    <div className="dinfo" dangerouslySetInnerHTML={{
                                            __html: this.state.data.cjcontent
                                        }}></div>
                                </div>
                                <div className="chead">
                                    <div className='citem'>
                                    比赛荣誉
                                        <div className="icen"><span></span></div>
                                    </div>
                                </div>

                                
                                
                                <div className="desc">
                                    <div className="dinfo" dangerouslySetInnerHTML={{
                                            __html: this.state.data.honorcontent
                                        }}></div>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>


                <div className="main" hidden>
                    <div className="cen">
                        <div className="box">
                            

                            <div className="tmb">

                                <div className="chead">
                                    <div className={this.state.ctype === 1?"citem c_active":"citem"} onClick={()=>{this.gotoChangeCtype(1)}}>
                                    活动详情
                                        <div className="icen"><span></span></div>
                                    </div>
                                    <div className={this.state.ctype === 2?"citem c_active":"citem"} onClick={()=>{this.gotoChangeCtype(2)}}>
                                    成绩公布
                                        <div className="icen"><span></span></div>
                                    </div>
                                    <div className={this.state.ctype === 3?"citem c_active":"citem"} onClick={()=>{this.gotoChangeCtype(3)}}>
                                    比赛荣誉
                                        <div className="icen"><span></span></div>
                                    </div>
                                </div>

                                <div className="desc" hidden={this.state.ctype !== 1}>
                                    <div className="dinfo" dangerouslySetInnerHTML={{
                                            __html: this.state.data.content
                                        }}></div>
                                </div>
                                <div className="desc" hidden={this.state.ctype !== 2}>
                                    <div className="dinfo" dangerouslySetInnerHTML={{
                                            __html: this.state.data.cjcontent
                                        }}></div>
                                </div>
                                <div className="desc" hidden={this.state.ctype !== 3}>
                                    <div className="dinfo" dangerouslySetInnerHTML={{
                                            __html: this.state.data.honorcontent
                                        }}></div>
                                </div>

                            </div>

                            <div className='cright'>
                                <div className='c_course'>
                                    <h1>相关活动</h1>
                                    {
                                        this.state.livesign.map((item,index)=>{
                                            return <div className='item' onClick={()=>{this.gotoDataInfo(item.id)}}>
                                                            <div className="itop" style={{backgroundImage:"url('"+item.image+"')"}}>
                                                            </div>
                                                            <div className="ibom">
                                                                <h2>{item.title}</h2>
                                                                <div className='itext'>
                                                                {item.cont}
                                                                </div>
                                                            </div>
                                                        </div>
                                        })
                                    }
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

                <div className='alert' hidden={!this.state.alert}>
                    <div className='abox'>
                        <div className='cen'>
                            <img alt="" src="assets/imgs/chenggong.png" />
                        </div>
                        <h1>报名成功！</h1>
                        <p>您的在线报名已成功提交</p>
                        <p>我们管理员会及时和您联系</p>
                        <button onClick={()=>{this.setState({alert:false})}}>好的</button>
                    </div>
                </div>

                <div className='alert' hidden={!this.state.alert2}>
                    <div className='abox2'>
                        <h1>未登录</h1>
                        <p>您好，您暂未登录，</p>
                        <p>请登录您的个人账号后继续使用</p>
                        <div className='adiv'>
                            <button className='ad1' onClick={()=>{this.setState({alert2:false})}}>取消</button>
                            <button className='ad2' onClick={()=>{this.setState({showLogin:!this.state.showLogin,alert2:false})}}>去登录</button>
                        </div>
                    </div>
                </div>

                <Footer />
            </div>
        )
    }
}
